<template>
	<div>
		<el-dialog title="文件预览" :visible.sync="dialogFormVisible" width="70%">
			<div class="block" style="height: 800px;overflow-y: auto;">
				<template v-if="fileType.indexOf('image') != -1">
					<!--图片-->
				  <el-image
						style="width: 800px;height: 800px;"
						:src="fileUrl"
						:fit="fit"
						></el-image>
				</template>
				<template v-else-if="fileType.indexOf('pdf') != -1">
					<!-- <pdf :src="fileUrl" /> -->
					<pdf v-for="i in numPages"
							:key="i"
							:src="pdfUrl"
							:page="i"
							style="display: inline-block; width: 100%"></pdf>
				</template>
				<template v-else-if="fileName.indexOf('.docx') != -1">
					docx预览
					<vue-office-docx :src="fileUrl" @rendered="rendered" style="display: inline-block; width: 100%"/>
				</template>
				<template v-else-if="fileType.indexOf('excel') != -1 || fileName.indexOf('.xlsx') != -1">
					excel预览
					<vue-office-excel :src="fileUrl" @rendered="rendered" style="display: inline-block; width: 100%"/>
				</template>
				<template v-else>
					<div>该文件格式不支持预览，请点击下载查看</div>
					<!-- <iframe :src="fileUrl" width="100%" height="500px"></iframe> -->
				</template>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="warning" :loading="downLoading" @click="downFile()">下 载</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pdf from 'vue-pdf'
	import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
	//引入VueOfficeDocx组件
	import VueOfficeDocx from '@vue-office/docx'
	//引入VueOfficeExcel组件
	import VueOfficeExcel from '@vue-office/excel'
	//引入相关样式
	import '@vue-office/excel/lib/index.css'

	export default {
		components:{
			pdf,
			VueOfficeDocx,
			VueOfficeExcel
		},
		name: 'PreviewFile',
		props: {
			// fileType: {
			// 	type: String,
			// },
			// fileUrl: {
			// 	type: String,
			// },
		},
		data() {
			return {
				fit:'scale-down',
				fullscreen:true,
				dialogFormVisible: false,
				numPages: undefined,
				pdfUrl:'',
				fileType:'',
				fileUrl:'',
				fileName:'',
				downLoading:false,
			};
		},
		mounted() {
		},
		methods:{
			showDialog: function(fileType, fileUrl, fileName){
				this.fileUrl = fileUrl;
				this.fileType = fileType;
				this.fileName = fileName;
				console.log("this.fileType", this.fileType)
				console.log("this.fileUrl", this.fileUrl)
				if(fileType.indexOf('image') != -1){
					console.log("走图片预览")
				}else if(fileType.indexOf('pdf') != -1){
					console.log("走pdf预览")
				}else if(fileName.indexOf('.docx') != -1){
					console.log("走docx预览")
				}else if(fileType.indexOf('excel') != -1 || fileName.indexOf('.xlsx') != -1){
					console.log("走excel预览")
				}else if(fileType.indexOf('excel') != -1 || fileName.indexOf('.xlsx') != -1){
					console.log("都没走")
				}
				if(this.fileType.indexOf('pdf') != -1){
					console.log("pdf",pdf)
					// console.log("this.fileUrl",this.fileUrl)
					this.pdfUrl = pdf.createLoadingTask({url:this.fileUrl, CMapReaderFactory });
					console.log("this.pdfUrl", this.pdfUrl)
					this.pdfUrl.promise.then(pdf => {
						this.numPages = pdf.numPages;
					});
				}
				this.dialogFormVisible = true;
			},
			downFile:function(){
				this.downLoading = true;
				this.Base64Util.downloadFile(this.fileUrl, this.fileName, this.fileType);
				this.downLoading = false;
			},
			rendered:function(e){
				console.log("rendered e", e)
			}
		},
		watch: {
		    fileUrl(newVal, oldVal) {
			  // console.log("fileUrl", newVal)
		    },
		    fileType(newVal, oldVal) {
			  console.log("fileType", newVal)
		    },
		},
		
	};
</script>

<style>
	/* .el-image__inner{
		width: 100%;
		height: 100%;
		vertical-align: top;
	} */
</style>
